<template>
  <div class="app-container page-group-groupdetail">
    <div>
      <div >
        <span class="contentTitle">{{ groupDetail.displayName }}</span><el-link :title="groupDetail.remark">
          <!-- <i class="el-icon-info"></i> -->
        </el-link>
      </div>
      <div>
        <span class="index-status"><i class="el-icon-right"></i>正在运行</span>
      </div>
      <div class="index-count-line">
        <router-link :to="'/group/userDetail?id=' + groupDetail.id" class="panel-head" >
          <div class="index-count-block">
            <div class="index-count-content">
              <div class="index-content">{{groupDetail.resultNum}} </div>
              <div class="index-person-num">人</div>
              <div class="index__count___u8gSA">
                <div><span class="index__succeed___3Mrp1"></span></div>
              </div>
              <span class="index__finish___2-j5s">{{groupDetail.createTime}}</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </router-link>
      </div>
    </div>

    <el-row :gutter="10" class="mb8" style="float: right;top:-30px;">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          v-hasPermi="['base:group:add']"
        >查看规则
        </el-button>
      </el-col>
<!--      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-download"
          size="small"
          @click="handleAdd"
          v-hasPermi="['base:group:add']"
        >下载
        </el-button>
        </el-col>
        -->

    </el-row>
    <el-row>
      <event-bar-chart :chart-data="chartData" :chart-title="chartTitle" :style="{width:'100%',height:'500px'}"/>
    </el-row>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="计算基准时间" align="center" prop="resultTime" sortable>
      </el-table-column>
      <el-table-column label="分群人数" align="center" prop="resultNum" sortable/>
      <el-table-column label="计算详情" align="center" prop="taskStatus" :formatter="statusFormat">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-refresh"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['base:group:edit']"
          >
          </el-button> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            @click="handleExport(scope.row)"
            v-hasPermi="['base:group:remove']"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getGroupHistory"
    />

    <!-- 添加或修改用户分群对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="620px" v-if="open" :close-on-click-modal="false"
               append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div class="ant-modal-body">
          <div class="index__container___2sti8 " data-value="normal" @click="buildUserGroup">
            <div class="index__blockLogo___hnHAh"><img
              src=""
              alt=""></div>
            <div class="index__blockDivideLine___2nKYu"></div>
            <div class="index__blockDesc___EXACq">
              <div class="index__blockDescTitle___J9yjM">规则创建</div>
              <p class="index__blockDescContent___18v9U">使用用户属性及行为数据，筛选出符合条件的用户。如：将“过去 7 天有登录行为”的用户，划分为“近期登录用户”用户分群</p>
            </div>
          </div>
          <div class="index__container___2sti8 " data-value="upload">
            <div class="index__blockLogo___hnHAh"><img
              src=""
              alt=""></div>
            <div class="index__blockDivideLine___2nKYu"></div>
            <div class="index__blockDesc___EXACq">
              <div class="index__blockDescTitle___J9yjM">导入创建</div>
              <p class="index__blockDescContent___18v9U">
                上传包含用户属性的文件与用户列表进行匹配，筛选出符合条件的用户。如：将“线下支付”的用户电话号上传与用户列表电话号进行匹配，匹配结果保留为用户分群</p></div>
          </div>
        </div>
      </el-form>
    </el-dialog>

    <el-drawer title="创建用户分群" :visible.sync="drawer" direction="rtl" size="60%" :wrapperClosable="true"
               :before-close="handleClose" custom-class='el-drawer-mode'>
      <el-main style="overflow-y: auto;">
        <el-steps :active="active" process-status='finish' finish-status="finish" :space="200"
                  :align-center="true" class="el-steps-mode">
          <el-step title="基础信息"></el-step>
          <el-step title="分群信息"></el-step>
        </el-steps>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding:10px;">

          <el-card class="box-card" v-show="active===0">
            <el-form-item label="分群显示名称" prop="displayName">
              <el-input v-model="form.displayName" placeholder="请输入分群显示名称" />
            </el-form-item>
            <!--            <el-form-item label="分群名称" prop="name">
              <el-input v-model="form.name" placeholder="以字母开头, 可包含小写字母、数字、下划线">
                <template slot="prepend">user_group_</template>
              </el-input>
            </el-form-item>-->

            <el-form-item label="更新方式">
              <el-radio-group v-model="form.updateType">
                <el-radio v-for="dict in updateTypeOptions" :key="dict.dictValue"
                          :label="dict.dictValue" border>{{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
              <div v-show="form.updateType==='01'" style="margin-top:10px">
                按
                <el-select v-model="form.taskType" placeholder="请选择执行类型" style="width:100px">
                  <el-option label="天" value="day"></el-option>
                </el-select>
                计算 分群每日凌晨更新
              </div>
              <div v-show="form.updateType==='02'" style="margin-top:10px">
                分群生成后，点击“更新”进行数据的更新
              </div>
            </el-form-item>
            <el-form-item label="推送配置" prop="pushId">
              <el-input v-model="form.pushId" placeholder="请输入推送配置" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" />
            </el-form-item>
          </el-card>

          <el-card class="box-card" v-show="active===1">
            <div slot="header" class="clearfix">
              <span>在全部用户中，将满足以下条件的用户保存为用户分群</span>
            </div>

            <div class="contentLine" :style="{height:globalHeight, top: 'unset'}">
              <span @click="globalChangeExpressionFun">{{ form.globalStr }}</span>
            </div>


            <div class="itemContent" id="rowContentProperties">
              <div class="content-header"><i class="el-icon-plus"></i>用户属性满足
                <el-link type="primary" :underline="false"
                         style="padding-left:20px;float:right;display: inline-block;"
                         @click="addUserAttribute">
                  <i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
                </el-link>
              </div>

              <div>
                <div class="contentLine" :style="{height:height}" v-show="form.userAttributes.length>1">
                  <span @click="changeExpressionFun">{{ form.attributeStr }}</span>
                </div>

                <div class="contentProperties" id="divContentProperties">
                  <div v-show="form.userAttributes.length>0">
                    <el-form-item label="" style="display: block;padding-left:10px;"
                                  label-width="0px">
                      <div class="attribute-item" v-for="(v,index) in form.userAttributes">
                        <el-select :value='form.userAttributes[index]' style="width:120px"
                                   class="line-item" value-key='attributeRemark'
                                   @change="userAttributeChangeFun($event, index)">
                          <el-option v-for="dict in userAttributeOptions" :key="dict.id"
                                     :label="dict.attributeRemark" :value="dict" />
                        </el-select>

                        <el-select v-model="form.userAttributes[index].valueExpression"
                                   style="width:120px" class="line-item"
                                   @change="eventPropertyChange(form.userAttributes[index],index)">
                          <el-option v-for="dict in userPropertysOptions" :key="dict.id"
                                     :label="dict.eventItemExpression" :value="dict.eventItemCode" />
                        </el-select>
                        <el-input v-model="form.userAttributes[index].value1Str" type="text"
                                  controls-position="right" style="width:100px" class="line-item"
                                  v-show="form.userAttributes[index].valueExpression!='between'">
                        </el-input>
                        <span v-show="form.userAttributes[index].valueExpression=='between'">
													<el-input v-model="form.userAttributes[index].value1Str" type="text"
                                    controls-position="right" style="width:90px"></el-input>与
													<el-input v-model="form.userAttributes[index].value2Str" type="text"
                                    controls-position="right" style="width:90px"></el-input>之间
												</span>
                        <el-link type="primary" :underline="false"
                                 style="padding-left:20px;font-size:18px"
                                 @click="removeRule(form.userAttributes,index)">
                          <i class="el-icon-remove"></i>
                        </el-link>
                      </div>

                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>

            <div class="itemContent">
              <div class="content-header"><i class="el-icon-plus"></i>用户行为满足
                <el-link type="primary" :underline="false"
                         style="padding-left:20px;float:right;display: inline-block;"
                         @click="addUserActions">
                  <i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
                </el-link>
              </div>

              <div class="contentLine" :style="{height:actionHeight}" v-show="form.userActions.length>1">
                <span @click="changeActionExpressionFun">{{ form.actionStr }}</span>
              </div>

              <div class="contentProperties" id="divContentActions">
                <el-form-item label="" style="display: block;padding-left:10px;"
                              v-show="form.userActions.length>0" label-width="0px">
                  <div class="action-item" v-for="(v,index) in form.userActions">
                    <span class="indexButton">{{indexOptions[index]}}</span>
                    <el-date-picker class="line-item" v-model="form.userActions[index].dataRange"
                                    size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                                    range-separator="-" :picker-options="pickerOptions" start-placeholder="开始日期"
                                    end-placeholder="结束日期"></el-date-picker>
                    <el-select class="line-item" v-model="form.userActions[index].doThings"
                               style="width:120px" size="small"
                               @change="eventPropertyChange(form.userActions[index],index)">
                      <el-option label="做过" value="do" />
                      <el-option label="未做过" value="undo" />
                    </el-select>
                    <el-select class="line-item" v-model="form.userActions[index].eventType"
                               style="width:120px" @change="eventTypeChange(funnelRuleType,index)"
                               value-key="id" size="small">
                      <el-option v-for="dict in eventTypeOptions" :key="dict.id"
                                 :label="dict.eventTypeName" :value="dict" />
                    </el-select>
                    <el-link type="primary" :underline="false" style="padding-left:20px;"
                             @click="addActionEventItem(form.userActions[index].eventItems,index)">
                      <i class="el-icon-plus"></i>添加筛选
                    </el-link>
                    <el-link type="primary" :underline="false"
                             style="padding-left:20px;font-size:18px"
                             @click="removeActionRule(form.userActions,index)">
                      <i class="el-icon-remove"></i>
                    </el-link>
                    <div class="el-row-mode"
                         v-for="(item,itemIndex) in form.userActions[index].eventItems">
                      <el-select class="line-item" v-model="item.eventItem" style="width:120px"
                                 size="small" value-key="id">
                        <el-option
                          v-for="dict in allEventItemListOpts[form.userActions[index].eventType.id]"
                          :key="dict.id" :label="dict.eventItemName" :value="dict" />
                      </el-select>
                      <el-select class="line-item" v-model="item.eventItemExpression"
                                 style="width:100px"
                                 @change="eventPropertyChange(funnelRuleType[index],index)" size="small">
                        <el-option
                          v-for="dict in eventPropertysOptions[item.eventItem.valueType]"
                          :key="dict.id" :label="dict.eventItemExpression"
                          :value="dict.eventItemCode" />
                      </el-select>
                      <el-input class="line-item" size="small" v-model="item.value1Str"
                                type="text" controls-position="right" style="width:100px"
                                v-show="ruleTypes3Flag==1"></el-input>
                      <span v-show="ruleTypes3Flag==2">
												<el-input v-model="item.value1Str" type="text" size="small"
                                  controls-position="right" style="width:90px"></el-input> 与
												<el-input v-model="item.value2Str" type="text" size="small"
                                  controls-position="right" style="width:90px"></el-input>之间
											</span>
                      <el-link
                        @click="removeOrderEventRule(form.userActions[index].eventItems,itemIndex)"
                        type="primary" style="padding-left:20px;font-size:18px"
                        icon="el-icon-remove"></el-link>
                    </div>
                    <div class="el-row-mode">
                      <el-cascader class="line-item" size="small"
                                   v-model="form.userActions[index].eventMethod"
                                   :options="allEventItemMethodOpts[form.userActions[index].eventType.id]"
                                   :props="{ expandTrigger: 'hover',multiple:false}"
                                   @change="selectItemMethod(formItem,indexA)"></el-cascader>
                      <el-select class="line-item" size="small"
                                 v-model="form.userActions[index].eventItemExpression"
                                 style="width:120px"
                                 @change="eventPropertyChange(funnelRuleType[index],index)">
                        <el-option v-for="dict in eventPropertysOptions['02']" :key="dict.id"
                                   :label="dict.eventItemExpression" :value="dict.eventItemCode" />
                      </el-select>
                      <el-input class="line-item" v-model="form.userActions[index].value1Str"
                                type="text" controls-position="right" style="width:100px" size="small"
                                v-show="ruleTypes3Flag==1"></el-input>
                      <span v-show="ruleTypes3Flag==2">
												<el-input v-model="form.userActions[index].value1Str" size="small"
                                  type="text" controls-position="right" style="width:90px">
												</el-input>与
												<el-input v-model="form.userActions[index].value2Str" size="small"
                                  type="text" controls-position="right" style="width:90px">
												</el-input>之间
											</span>
                    </div>
                  </div>
                </el-form-item>
              </div>

            </div>

            <div class="itemContent">
              <div class="content-header"><i class="el-icon-plus"></i>行为序列
                <el-link type="primary" :underline="false"
                         style="padding-left:20px;float:right;display: inline-block;"
                         @click="addActionOrders">
                  <i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
                </el-link>
              </div>
              <div>
                <div class="contentLine" :style="{height:orderHeight}"
                     v-show="form.userActionOrders.length>1">
                  <span @click="changeOrderExpressionFun">{{ form.orderStr }}</span>
                </div>
                <div class="contentProperties" id="divActionOrders">
                  <el-row v-show="form.userActionOrders.length>0">
                    <el-form-item label="" style="display: block;padding-left:10px;"
                                  label-width="0px">
                      <div class="actionOrder-item" v-for="(v,index) in form.userActionOrders">
                        <span class="indexButton">{{indexOptions[index]}}</span>
                        <el-date-picker v-model="form.userActionOrders[index].dataRange"
                                        size="small" style="width: 240px" value-format="yyyy-MM-dd"
                                        type="daterange" range-separator="-" :picker-options="pickerOptions"
                                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        依次做过
                        <el-link type="primary" :underline="false" style="padding-left:20px;"
                                 @click="addActionOrderEventItem(form.userActionOrders[index].eventItems,index)">
                          <i class="el-icon-plus"></i>添加筛选
                        </el-link>
                        <el-link type="primary" :underline="false"
                                 style="padding-left:20px;font-size:18px"
                                 @click="removeActionOrderRule(form.userActionOrders,index)">
                          <i class="el-icon-remove"></i>
                        </el-link>
                        <div class="el-row-mode actionOrder-item-item"
                             v-for="(item,itemIndex) in form.userActionOrders[index].eventItems">
													<span
                            class="secondButton">{{indexOptions[index]+''+(itemIndex+1)}}</span>
                          <el-select class="little-line-item" v-model="item.eventId"
                                     style="width:120px" size="small"
                                     @change="eventTypeChange(funnelRuleType,index)">
                            <el-option v-for="dict in eventTypeOptions" :key="dict.id"
                                       :label="dict.eventTypeName" :value="dict.id" />
                          </el-select>
                          <el-select v-model="item.eventItem" style="width:120px" size="small"
                                     value-key="id" class="little-line-item">
                            <el-option v-for="dict in allEventItemListOpts[item.eventId]"
                                       :key="dict.id" :label="dict.eventItemName" :value="dict" />
                          </el-select>
                          <el-select v-model="item.eventItemExpression" style="width:120px"
                                     @change="eventPropertyChange(funnelRuleType[index],index)" size="small"
                                     class="little-line-item">
                            <el-option
                              v-for="dict in eventPropertysOptions[item.eventItem.valueType]"
                              :key="dict.id" :label="dict.eventItemExpression"
                              :value="dict.eventItemCode" />
                          </el-select>
                          <el-input v-model="item.value1Str" type="text" size="small"
                                    controls-position="right" style="width:100px"
                                    v-show="ruleTypes3Flag==1"></el-input>
                          <span v-show="ruleTypes3Flag==2">
														<el-input v-model="item.value1Str" type="text"
                                      controls-position="right" style="width:90px"></el-input>与
														<el-input v-model="item.value2Str" type="text" size="small"
                                      controls-position="right" style="width:90px"></el-input>之间
													</span>
                          <el-link
                            @click="removeOrderEventRule(form.userActionOrders[index].eventItems,itemIndex)"
                            type="primary" style="padding-left:20px;font-size:18px"
                            icon="el-icon-remove"></el-link>

                        </div>
                      </div>

                    </el-form-item>
                  </el-row>
                </div>
              </div>
            </div>

            <el-form-item label="预估人数" style="margin-top:20px;padding-left:10px;">
              <el-select v-model="form.prevNumber">
                <el-option label="按全量计算" value="1" />
                <!--<el-option label="按1/2抽样计算" value="2" />
                <el-option label="按1/4抽样计算" value="4" />
                <el-option label="按1/8抽样计算" value="8" />
                <el-option label="按1/16抽样计算" value="16" />
                <el-option label="按1/32抽样计算" value="32" />
                <el-option label="按1/64抽样计算" value="64" />-->
              </el-select>
              <el-button type="primary" @click="preSummaryFun">预估</el-button> <span
              class="caclResult">{{calcGroupNum}}</span>
            </el-form-item>

            <!-- <el-form-item label="限制人数" label-position="top" style="margin-top:20px;padding-left:10px;">
              <el-checkbox v-model="form.limitNumberFlag">限制人群返回数量</el-checkbox>
            </el-form-item> -->
            <el-form-item label="  按  " v-show="form.limitNumberFlag">
              <el-select v-model="form.limitType">
                <el-option label="随机" value="1" />
                <el-option label="属性" value="2" />
              </el-select>
              <el-select v-model="form.limitUserAttribute" v-show="form.limitType==='2'"
                         style="width:100px">
                <el-option v-for="dict in userPropertysOptions" :key="dict.id"
                           :label="dict.eventItemExpression" :value="dict.eventItemCode" />
              </el-select>
              <el-select v-model="form.sortType" v-show="form.limitType==='2'" style="width:100px">
                <el-option label="数值从大到小" value="1" />
                <el-option label="数值从小到达" value="2" />
              </el-select>
              返回
              <el-input-number v-model="form.limitNumber" :controls="false" style="width:80px">
              </el-input-number>
              人
            </el-form-item>
          </el-card>
        </el-form>

      </el-main>
      <el-footer height="80px">
        <el-col :span="1.5">
          <el-button @click="handleClose">取 消</el-button>
        </el-col>

        <el-col :span="1.5" style="float: right;padding-left:10px">
          <el-button type="primary" @click="changeSteps">{{ active === 1 ? '创 建' : '下一步' }}</el-button>
        </el-col>
        <el-col :span="1.5" style="float: right">
          <el-button type="primary" @click="prevSteps" v-show="active===1">上一步</el-button>
        </el-col>
      </el-footer>
    </el-drawer>
  </div>
</template>

<script>
import {
  listGroup,
  getGroup,
  delGroup,
  addGroup,
  updateGroup,
  exportGroup,
  getGroupHistoryData,
  addUserGroup, calcUserGroupNumber,exportUserDetail
} from "@/api/base/group";
import {getUserAttributeList} from "@/api/config/userattribute";
import {listPropertyByType} from "@/api/config/property";
import {eventTypeOptions} from "@/api/config/item";
import EventBarChart from "@/views/report/event/comments/EventBarChart";

export default {
  name: "groupDetail",
  components: {
    EventBarChart
  },
  data() {
    return {
      chartTitle:[],
      chartData:{},
      tableData:[],
      drawer: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 更新方式字典
      updateTypeOptions: [],
      // 预估类型字典
      reckonTypeOptions: [],
      // 运行状态字典
      statusOptions: [],
      // 最后计算状态字典
      lastCalcStatusOptions: [],
      // 创建方式字典
      buildTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        updateType: undefined,
        status: undefined,
        onlyMe: '',
        lastCalcStatus: undefined,
        buildType: undefined,
      },
      // 表单参数
      form: {
        name: '',
        userAttributes: [],
        userActions: [],
        userActionOrders: [],
        limitNumberFlag: false,
        limitType: '1',
        resultNum: 0,
        buildType: '01',
        globalStr: '且',
        attributeStr: '且',
        actionStr: '且',
        orderStr: '且',
        taskType: 0,
      },
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay() || 7;
            var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 - day);
            picker.$emit('pick', [newStart, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 表单校验
      rules: {},
      active: 0,
      ruleTypes3Flag: 0,
      userPropertysOptions: [],
      userAttributeOptions: [],
      height: '0px',
      actionHeight: '0px',
      orderHeight: '0px',
      eventTypeOptions: [],
      groupDetail:{},
      eventItemMethosOpts: [],
      allEventItemListOpts: {},
      eventPropertysOptions: {},
      allEventItemMethodOpts: {},
      childHeight: 0,
      globalHeight: '186px',
      indexOptions: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
      ],
      calcGroupNum: '',
      currentGroupId:''
    };
  },
  computed: {
    maxHeight() {
      let h1 = this.getDocumentHeight('divContentProperties');
      let h2 = this.getDocumentHeight('divContentActions');
      let h3 = this.getDocumentHeight('divActionOrders');
      let height1 = h1.substring(0, h1.indexOf('px'));
      let height2 = h2.substring(0, h2.indexOf('px'));
      let height3 = h3.substring(0, h3.indexOf('px'));
      let glogH = parseFloat(height1) + parseFloat(height2) + parseFloat(height3);
      console.log(`h1: ${h1}, h2: ${h2}, h3: ${h3}`)
      console.log(glogH)
      return '0px'
    }
  },
  created() {
    const groupId = this.$route.query && this.$route.query.id;
    this.currentGroupId=groupId;
    this.getGroupDetail(groupId);
    this.getGroupHistory();
    this.getEventTypeList();
    this.getUserAttributeList();
    this.getDicts("sys_update_type").then(response => {
      this.updateTypeOptions = response.data;
    });
    this.getDicts("sys_normal_disable").then(response => {
      this.reckonTypeOptions = response.data;
    });
    this.getDicts("sys_run_status_type").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_calc_status_type").then(response => {
      this.lastCalcStatusOptions = response.data;
    });
    this.getDicts("sys_build_type").then(response => {
      this.buildTypeOptions = response.data;
    });
  },
  methods: {

    getGroupDetail(id){
      getGroup(id).then(response => {
        this.groupDetail = response.data;
        let jsonObject=JSON.parse(response.data.groupRule);
        this.form=jsonObject;
        this.form.userAttributes=jsonObject.userAttributes;
        this.form.userActions=jsonObject.userActions;
        this.form.userActionOrders=jsonObject.userActionOrders;

      });
    },
    getGroupHistory(){
      this.loading = true;
      getGroupHistoryData( this.currentGroupId).then(response => {
        this.chartTitle = response.data.chartTitle;
        this.chartData = response.data.chartData;
        this.tableData = response.data.tableData;
        this.loading = false;
    });
    },
    getEventTypeList() {
      var param = {status: 'Y'};
      eventTypeOptions(param).then(response => {
        this.eventTypeOptions = response.data;
      });
    },
    // 更新方式字典翻译
    updateTypeFormat(row, column) {
      return this.selectDictLabel(this.updateTypeOptions, row.updateType);
    },
    // 预估类型字典翻译
    reckonTypeFormat(row, column) {
      return this.selectDictLabel(this.reckonTypeOptions, row.reckonType);
    },
    // 运行状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.taskStatus);
    },
    // 最后计算状态字典翻译
    lastCalcStatusFormat(row, column) {
      return this.selectDictLabel(this.lastCalcStatusOptions, row.lastCalcStatus);
    },
    // 创建方式字典翻译
    buildTypeFormat(row, column) {
      return this.selectDictLabel(this.buildTypeOptions, row.buildType);
    },
    // 用户属性字典翻译
    userAttributeFormat(row, column) {
      return this.selectDictLabel(this.userAttributeOptions, row.userAttribute);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        name: '',
        userAttributes: [],
        userActions: [],
        userActionOrders: [],
        limitNumberFlag: false,
        limitType: '1',
        resultNum: 0,
        globalStr: '且',
        attributeStr: '且',
        actionStr: '且',
        buildType: '01',
        orderStr: '且'
      };
      this.childHeight = 0;
      this.globalHeight = '180px';
      this.height = '0px';
      this.actionHeight = '0px';
      this.orderHeight = '0px';
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.drawer = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.msgSuccess("功能还未实现，敬请期待！");
      return;
      this.reset();
      const id = row.id || this.ids
      getGroup(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改用户分群";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateGroup(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addGroup(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.msgSuccess("功能还未完成，敬请期待！");
      return;
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除用户分群编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delGroup(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
    },
    handleExport(row) {
      this.$confirm('是否确认导出用户记录吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportUserDetail(row.groupId);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },

    getUserAttributeList() {
      var param = {status: 'Y'};
      getUserAttributeList(param).then(response => {
        this.userAttributeOptions = response.data;
      });
    },

    userAttributeChangeFun(array, index) {
      array[groupDetail].valueExpression = '';
      array[groupDetail].value1Str = '';
      array[groupDetail].value2Str = '';
      listPropertyByType({valueType: array[groupDetail].dataType}).then(response => {
        this.userPropertysOptions = response.data;
      });
    },

    eventPropertyChange(obj, index) {
      if (obj.eventItemExpression == 'between') {
        this.ruleTypes3Flag = 2;
      } else {
        this.ruleTypes3Flag = 1;
      }
    },

    addUserAttribute() {
      let userAttribute = {
        attributeName: '',
        attributeRemark: '',
        valueExpression: '',
        dataType: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };

      this.form.userAttributes.push(userAttribute);
      let height = this.getDocumentHeight('divContentProperties');
      this.height = height;
    },

    addUserActions() {
      let userAction = {
        dataRange: [],
        doThings: '',
        eventType: ''
      };
      this.form.userActions.push(userAction);
      let height = this.getDocumentHeight('divContentActions');
      this.actionHeight = height;

    },
    addActionOrders() {
      let actionOrder = {
        dataRange: [],
        eventItem:[]
      };
      this.form.userActionOrders.push(actionOrder);
      let height = this.getDocumentHeight('divActionOrders');
      this.orderHeight = height;

    },

    getGlobalHeight() {
      this.$nextTick(() =>{
        let height = parseInt(this.getDocumentHeight('divContentProperties')) -10
        let actionHeight = parseInt(this.getDocumentHeight('divContentActions')) -10
        let orderHeight = parseInt(this.getDocumentHeight('divActionOrders')) -10
        let globalHeight = height + actionHeight + orderHeight +186 +30
        this.height = height + 'px'
        this.actionHeight = actionHeight + 'px'
        this.orderHeight = orderHeight + 'px'
        this.globalHeight = globalHeight + 'px'
      })
    },

    getDocumentHeight(id) {
      let div = document.getElementById(id);
      let height = window.getComputedStyle(div).getPropertyValue('height');
      return height;
    },

    removeRule(array, index) {
      array.splice(index, 1);
      this.getGlobalHeight();
    },
    removeActionRule(array, index) {
      array.splice(index, 1);
      this.getGlobalHeight();
    },
    removeActionOrderRule(array, index) {
      array.splice(index, 1);
      this.getGlobalHeight();
    },

    setDivHeight() {
      let height = this.getDocumentHeight('divContentProperties');

    },

    handleClose() {
      this.drawer = false;
    },

    buildUserGroup() {
      this.open = false;
      this.drawer = true;
    },

    prevSteps() {
      this.active = 0;
    },
    changeSteps() {
      if (this.active < 2) {
        this.active++;
      }
      if (this.active === 2) {
        this.active = 1;
        let requestJson = JSON.stringify(this.form);
        addUserGroup({
          requestJson: requestJson
        }).then(response => {
          if (response.code === 200) {
            this.msgSuccess("新增成功");
            this.drawer = false;
            this.getList();
          } else {
            this.msgError(response.msg);
          }
        });
      }

    },
    globalChangeExpressionFun() {
      this.form.globalStr = this.form.globalStr === '且' ? '或' : '且';
    },
    changeExpressionFun() {
      this.form.attributeStr = this.form.attributeStr === '且' ? '或' : '且';
    },

    changeActionExpressionFun() {
      this.form.actionStr = this.form.actionStr === '且' ? '或' : '且';
    },
    changeOrderExpressionFun() {
      this.form.orderStr = this.form.orderStr === '且' ? '或' : '且';
    },

    addActionEventItem(itemArray, index) {
      let eventItem = {
        eventItem: {},
        eventItemExpression: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      itemArray.push(eventItem);
      this.getGlobalHeight();
    },

    addActionOrderEventItem(itemArray) {
      let eventItem = {
        eventId: '',
        eventItem: {},
        eventItemExpression: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      itemArray.push(eventItem);
      this.getGlobalHeight();
    },

    removeOrderEventRule(itemArray, index) {
      itemArray.splice(index, 1);
      this.getGlobalHeight();
    },

    preSummaryFun() {
      this.form.name = 'user_group_' + this.form.name;
      let requestJson = JSON.stringify(this.form);
      calcUserGroupNumber({
        requestJson: requestJson
      }).then(response => {
        if (response.code === 200) {
          let num = response.data;
          if (num) {
            this.form.resultNum = num;
            this.calcGroupNum = num + ' 人';
          } else {
            this.calcGroupNum = '所选范围内，没有符合该条件的用户';
          }
        } else {
          this.msgError(response.msg);
        }
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.ant-modal-body {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;

  .index__container___2sti8 {
    background: #fff;
    width: 540px;
    padding: 15px 20px;
    border-radius: 3px;
    border: 1px solid #e9f0f7;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    .index__blockLogo___hnHAh {
      width: 73px;
      text-align: center;
    }

    .index__blockDivideLine___2nKYu:before {
      content: "";
      border-left: 1px solid #e0e6ed;
      height: 40px;
      display: block;
      margin: 0 27px;
    }

    .index__blockDesc___EXACq {
      display: inline-block;
      width: 383px;
    }
  }

  .index__container___2sti8:hover {
    border-color: #00bf8a;
  }
}

.page-group-groupdetail{
	.itemContent {
		border: 1px solid #e0e6ed;
		padding: 10px 10px;
		border-radius: 3px;
	}

	.contentLine {
		width: 2px;
		float: left;
		margin-top: 3%;
		background-color: #d6efe8;
	}

	.contentLine > span {
		position: relative;
		display: block;
		top: 50%;
		left: -12px;
		right: 0;
		width: auto;
		min-width: 25px;
		height: 25px;
		transform: translateY(-50%);
		border-radius: 3px;
		background: #d6efe8;
		color: #00d166;
		font-size: 14px;
		font-weight: 700;
		line-height: 25px;
		text-align: center;
		cursor: pointer;
		user-select: none;
	}

	.contentProperties {
		width: 99%;
		float: right;

		.el-form-item {
			margin-bottom: 0px;
		}
	}
}

.el-drawer{
  overflow: scroll
}

  .contentTitle{
    display: inline-block;
    max-width: calc(100% - 30px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 20px;
    color: #1f2d3d;
    font-weight: 600;
  }
  .contentSecTitle{
    font-size: 12px;
  }
  .index-status{
    display: flex;
    align-items: center;
    line-height: 1.8;
    font-size: 13px;
    color: #707f96;
  }
  .index-count-line{
    display: flex;
    justify-content: space-between;
    .index-count-block{
      width: auto;
      min-width: 215px;
      height: 35px;
      border-radius: 18px;
      background: #f5f8fc;
      padding: 0 15px;
      .index-count-content{
        display: inline-block;
        .index-content{
          display: inline-block;
          width: auto;
          line-height: 35px;
          font-size: 20px;
          color: #475669;
        }
        .index-person-num{
          display: inline-block;
          color: #8492a6;
          font-size: 12px;
        }
        .index__count___u8gSA{
          display: inline-block;
          .index__succeed___3Mrp1{
            display: inline-block;
            position: relative;
            width: 6px;
            height: 6px;
            top: -3px;
            margin: 0 8px;
            vertical-align: middle;
            border-radius: 50%;
            background-color: #13ce66;
          }
        }
        .index__finish___2-j5s {
          width: max-content;
          font-weight: 300;
          margin-right: 13px;
          line-height: 35px;
          vertical-align: top;
          display: inline-block;
          color: #8492a6;
          font-size: 12px;
        }
      }
    }
    .index-count-block:hover{
      background: #edf1f5;
      cursor:pointer;
    }
  }

</style>
